<template>
    <PageLayout :title="title">
        <view class="contanier">
            <up-list>
                <up-list-item>
                    <up-cell @click="handlerAdd">
                        <template #title>
                            <view class="btn-add">
                                <up-icon name="plus"></up-icon>
                                <view>新增分组</view>
                            </view>
                        </template>
                    </up-cell>
                </up-list-item>
                <up-list-item v-for="(peopleGroup,idx) in peopleGroupList" :key="'peopleGroup'+idx" :title="peopleGroup.name">
                    <up-cell @click="handlerPeopleGroupItem(peopleGroup)">
                        <template #title>
                            <view class="group-item-box">
                                <view class="title-box">
                                    <view class="title">{{peopleGroup.name}}</view>
                                    <view class="sub-title">人数：{{peopleGroup.count}}</view>
                                </view>
                                <view class="avatar-list-box">
                                    <block v-if="peopleGroup.userList.length==0">
                                        <view>暂无成员</view>
                                    </block>
                                    <block v-for="(user,idx) in peopleGroup.userList" :key="'user'+idx">
                                        <up-avatar :src="user.avatarUrl"></up-avatar>
                                    </block>
                                </view>
                            </view>
                        </template>
                    </up-cell>
                </up-list-item>
            </up-list>
            <up-action-sheet :round="20" closeOnClickOverlay :actions="actionList" 
                             @close="()=>actionShow=false" safeAreaInsetBottom
                             :title="actionTitle" :show="actionShow" @select="handlerActionSel"></up-action-sheet>
        </view>
    </PageLayout>
</template>

<script lang="ts" setup>
    import PageLayout from '../../../components/myLayout/PageLayout.vue';
    import {ref} from "vue"
    import { MyAlert, MyHttps } from '../../../utils/utils';
    import { ProjectGroupListReq, ProjectGroupJoinReq, ProjectGroupDelReq } from '../../../http/project';
    import {onLoad,onShow} from "@dcloudio/uni-app"
    import { useProjectStore } from '../../../store/projectStore';

    const avatarUrl=ref("https://uview-plus.jiangruyi.com/h5/static/uview/album/2.jpg")

    const selPeopleGroup=ref({})

    const actionTitle=ref("")

    const actionShow=ref(false)

    const {project} = useProjectStore()

    const title=ref("项目:"+project.name+"——成员分组")

    const peopleGroupList=ref([])

    const handlerJoin=()=>{
        ProjectGroupJoinReq({id:selPeopleGroup.value['id']}).then(res=>{
            console.log(res)
            MyAlert({title:"成功",content:`加入${selPeopleGroup.value['name']}成功！`})
            getProjectGroupList()
        })
    }

    const handlerEdit=()=>{
		uni.navigateTo({
			url:"/pages/aaProject/setting/peopleGroup/edit?id="+selPeopleGroup.value['id']
		})
    }

    const handlerDel=async ()=>{

        const isOk=await MyAlert({title:"提示",content:`确认要删除分组${selPeopleGroup.value['name']}吗？`})
        if(!isOk) return
        ProjectGroupDelReq({id:selPeopleGroup.value['id']}).then(res=>{
            MyAlert({title:"成功",content:`删除${selPeopleGroup.value['name']}成功！`})
            getProjectGroupList()
        })
        
    }

    const actionList=[
        {name:"加入" ,color:"#f8744d",click:handlerJoin},
        {name:"修改",click:handlerEdit},
        {name:"删除",color:"#dd524d",click:handlerDel},
    ]

    

    const handlerActionSel=(action)=>{
        if(action.click){
            action.click()
        }
    }

    const handlerAdd=()=>{
        uni.navigateTo({
        	url:"/pages/aaProject/setting/peopleGroup/add"
        })
    }

    const getProjectGroupList=()=>{
        ProjectGroupListReq({}).then(res=>{
            peopleGroupList.value=res.data.list
        })
    }

    const handlerPeopleGroupItem=(peopleGroup)=>{
        actionTitle.value=peopleGroup.title
        actionShow.value=true
        selPeopleGroup.value=peopleGroup
    }
    
    onShow(()=>{
        getProjectGroupList()
    })

    

</script>

<style lang="scss">
    .contanier{
        background-color: #fff;
    }
    .btn-add{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .group-item-box{
        .title-box{
            display: flex;
            justify-content: space-between;
            margin-bottom: 20upx;
            .title{
                font-weight: bold;
            }
        }
        .avatar-list-box{
            display: flex;
            flex-wrap: wrap;
            > view{
                margin-right: 10upx;
            }
        }
    }

</style>